<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>

    <style>
        .current {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">

        <com1 :list='list'>
            <!-- slotProps  可以随便写 不是固定写法   -->
            <div slot-scope='slotProps'>
                <!-- <span>
{{slotProps.info}}
                </span> -->

                <strong v-if="slotProps.info.name=='orange' " class="current">


                    {{slotProps.info.name}}


                </strong>

                <span v-else>
                    {{slotProps.info.name}}

                </span>
            </div>


        </com1>


        <!-- 解构插槽 -->


        <com1 :list='list'>
            <!-- slotProps  可以随便写 不是固定写法   -->
            <div slot-scope='{info}'>
                <strong v-if="info.name=='orange' " class="current">
                    {{info.name}}
                </strong>
                <span v-else>
                    {{info.name}}
                </span>
            </div>
        </com1>
    </div>



    <template id='com1'>
        <div>
            <h1> 作用域插槽的基本使用 父组件可以完全控制子组件的样式
                内容 有子组件来决定
            </h1>


            <ul>
                <li v-for='(item,index) in list'>

                    <slot :info='item'> {{item.name}}</slot>
                </li>
            </ul>

        </div>



    </template>

    <script>


        let com1 = {
            template: '#com1',
            props: ['list']
        }
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'orange'
                }, {
                    id: 3,
                    name: 'banana'
                }]
            },
            methods: {},
            components: {
                com1
            }
        });
    </script>
</body>

</html>